<template>
  <view>
    <view style="background: #2a5a8a;padding-top: 20px">

      <view style="background: #234e79;margin: 16px;border-radius: 6px">
        <view style="display: flex;justify-content: left;padding-top: 12px">
          <view style="margin-left: 20px">
            <img style="width: 100px;height: 130px;border-radius: 8px" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
          </view>
          <view style="padding: 6px;margin: 2px 4px">
            <view style="color: #fff;font-size: 18px;font-weight: 600">三体全集(全三册)</view>
            <view style="color: #d5d5d5;font-size: 14px;margin-top: 12px">刘慈欣</view>
            <view style="color: #fff;font-size: 14px;margin-top: 10px">9.4分</view>
          </view>
        </view>
        <view style="width: 80%;height: 1px;margin: 10px auto;background: #2c5985"></view>
        <view style="display: flex;justify-content: space-around;padding-bottom: 12px">
          <view style="text-align: center">
            <view style="font-size: 14px;color: #6184ab">书籍分类</view>
            <view style="color: #8eabc6;padding: 4px">科幻</view>
          </view>
          <view style="text-align: center">
            <view style="font-size: 14px;color: #6184ab">书籍分类</view>
            <view style="color: #8eabc6;padding: 4px">科幻</view>
          </view>
          <view style="text-align: center">
            <view style="font-size: 14px;color: #6184ab">书籍分类</view>
            <view style="color: #8eabc6;padding: 4px">科幻</view>
          </view>
        </view>
      </view>

      <view>
        <view style="display: flex;justify-content: left;margin: 5px 12px">
          <view style="font-size: 18px;color: #fff;margin: 0 8px">简介</view>
          <text style="margin: 0 4px;font-size: 12px;padding: 4px 8px;color: #9db8d2;background: #21507a;border-radius: 3px">科幻</text>
          <text style="margin: 0 4px;font-size: 12px;padding: 4px 8px;color: #9db8d2;background: #21507a;border-radius: 3px">科幻</text>
          <text style="margin: 0 4px;font-size: 12px;padding: 4px 8px;color: #9db8d2;background: #21507a;border-radius: 3px">科幻</text>
        </view>
        <view style="color:#8eabc6;line-height: 26px;padding: 12px 20px" >
          军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展。但在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。
        </view>
      </view>
    </view>
    <view style="background: #fafafa">
      <view style="font-size: 18px;font-weight: 600;padding: 12px;border-bottom: 1px solid #f4f4f4">目录</view>
      <view>
        <view style="font-size: 14px;color: #9c9c9c;padding: 20px 12px">共262章</view>
      </view>
      <view style="width: 95%;margin: auto;height: 1px;background: #efefef"></view>
      <view>

        <view>
          <view style="margin-left: 24px;padding-bottom: 8px;border-bottom: 1px solid #efefef">
            <view style="padding: 8px 16px">第一章内容XXXXX</view>
            <view style="display: flex">
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 20px;height: 20px" src="static/images/listening/play.png">
                2.1万</view>
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 16px;height: 16px;margin-right: 4px" src="static/images/listening/time.png">
                01:10</view>
            </view>
          </view>

          <view style="margin-left: 24px;padding-bottom: 8px;border-bottom: 1px solid #efefef">
            <view style="padding: 8px 16px">第二章内容XXXXX</view>
            <view style="display: flex">
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 20px;height: 20px" src="static/images/listening/play.png">
                2.1万</view>
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 16px;height: 16px;margin-right: 4px" src="static/images/listening/time.png">
                01:10</view>
            </view>
          </view>

          <view style="margin-left: 24px;padding-bottom: 8px;border-bottom: 1px solid #efefef">
            <view style="padding: 8px 16px">第三章内容XXXXX</view>
            <view style="display: flex">
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 20px;height: 20px" src="static/images/listening/play.png">
                2.1万</view>
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 16px;height: 16px;margin-right: 4px" src="static/images/listening/time.png">
                01:10</view>
            </view>
          </view>

          <view style="margin-left: 24px;padding-bottom: 8px;border-bottom: 1px solid #efefef">
            <view style="padding: 8px 16px">第四章内容XXXXX</view>
            <view style="display: flex">
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 20px;height: 20px" src="static/images/listening/play.png">
                2.1万</view>
              <view style="display: flex;align-items: center;margin: 0 6px;color: #a9a9a9">
                <img alt="" style="width: 16px;height: 16px;margin-right: 4px" src="static/images/listening/time.png">
                01:10</view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <view style="position: fixed;bottom: 0;width: 100%;align-items: center;background: #fff;display: flex;justify-content: space-between;padding: 5px">
      <view style="text-align: center;width: 20%">
          <view>
            <img alt="" style="width: 24px;height: 24px" src="static/images/listening/bookshelf.png">
          </view>
          <view style="font-size: 14px">加入书架</view>
      </view>
      <view style="display: flex;align-items: center;background: #f96825;color: #fff;font-size: 18px;padding: 6px 32px;border-radius: 20px">
        <img alt="" style="width: 20px;height: 20px" src="static/images/listening/playback.png" />播放</view>
    </view>

  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {

    }
  },
  onLoad() {

  },
  onShow() {

  },
  methods: {

  }
}
</script>

<style scoped>

</style>
